<template>
  <div>
    <el-form-item label="最大星数">
      <el-input-number v-model="localData.max" controls-position="right" placeholder="最大星数" />
    </el-form-item>
    <el-form-item label="是否显示文本" label-width="110px">
      <el-switch v-model="localData.showText" />
    </el-form-item>
    <el-form-item label="自定义文本" label-width="110px" v-if="localData.showText">
      <el-tag
        :key="index"
        size="default"
        v-for="(tag, index) in localData.texts"
        closable
        @close="handleTextClose(tag)"
      >{{ tag }}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="textVisible"
        v-model="textValue"
        size="default"
        ref="textTag"
        clearable
        @keyup.enter="handleTextConfirm"
        @blur="handleTextConfirm"
      />
      <el-button
        v-if="!textVisible && localData.texts.length < localData.max"
        @click="showTextInput"
        size="default"
        icon="el-icon-plus"
        circle
        style="margin-left: 5px"
      />
    </el-form-item>
    <el-form-item label="自定义颜色" label-width="110px">
      <el-tag
        :key="index"
        v-for="(tag, index) in localData.colors"
        closable
        size="default"
        @close="handleColorClose(tag)"
        :style="{ color: tag }"
      >{{ tag }}
      </el-tag>
      <el-color-picker
        v-model="colorValue"
        size="default"
        @change="handleColorConfirm"
        class="color-picker"
      />
    </el-form-item>
    <!--    <el-form-item label="自定义图标">-->
    <!--      <el-tag :key="index" v-for="(tag,index) in data.iconClasses" closable @close="handleIconClose(tag)">{{tag}}-->
    <!--      </el-tag>-->
    <!--      <el-input class="input-new-tag"-->
    <!--                v-if="iconVisible"-->
    <!--                v-model="iconValue"-->
    <!--                size="mini"-->
    <!--                ref="iconTag"-->
    <!--                @keyup.enter.native="handleIconConfirm"-->
    <!--                @blur="handleIconConfirm">-->
    <!--      </el-input>-->
    <!--      <el-button v-else @click="showIconInput" size="mini" icon="el-icon-plus" circle-->
    <!--                 style="margin-left: 5px;"></el-button>-->
    <!--    </el-form-item>-->
  </div>
</template>

<script>
export default {
  name: 'ConfigRate',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      textVisible: false,
      textValue: '',
      colorVisible: false,
      colorValue: '',
      iconVisible: false,
      iconValue: '',
      localData: {}
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    }
  },
  methods: {
    handleTextClose(tag) {
      this.localData.texts.splice(this.data.texts.indexOf(tag), 1)
    },
    showTextInput() {
      this.textVisible = true
      this.$nextTick(() => {
        this.$refs.textTag.$refs.input.focus()
      })
    },
    handleTextConfirm() {
      if (this.textValue) this.localData.texts.push(this.textValue)
      this.textVisible = false
      this.textValue = ''
    },
    handleColorClose(tag) {
      this.localData.colors.splice(this.localData.colors.indexOf(tag), 1)
    },
    handleColorConfirm() {
      if (this.colorValue) this.localData.colors.push(this.colorValue)
      this.colorValue = ''
    }
    // handleIconClose(tag) {
    //   this.data.iconClasses.splice(this.data.iconClasses.indexOf(tag), 1);
    // },
    // showIconInput() {
    //   this.iconVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs.iconTag.$refs.input.focus();
    //   });
    // },
    // handleIconConfirm() {
    //   if (this.iconValue) this.data.iconClasses.push(this.iconValue);
    //   this.iconVisible = false;
    //   this.iconValue = '';
    // }
  }
}
</script>
<style lang="scss" scoped>
.el-tag {
  vertical-align: top;
}

.el-tag + .el-tag {
  margin-left: 5px;
}

.input-new-tag {
  width: 90px;
  margin-left: 5px;
  vertical-align: bottom;
}

.color-picker {
  left: 10px;
  vertical-align: top;
}
</style>
